<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>个人信息</title>
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	</head>

	<body class="layui-layout-body">
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo">个人信息</div>
				<!-- 头部区域（可配合layui已有的水平导航） -->
				<ul class="layui-nav layui-layout-left">
					<li class="layui-nav-item">
						<a href="s-main.html">商家首页</a>
					</li>
				</ul>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a href="javascript:;"> <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 贤心
						</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="">基本资料</a>
							</dd>
							<dd>
								<a href="">安全设置</a>
							</dd>
						</dl>
					</li>
					<li class="layui-nav-item">
						<a href="">退了</a>
					</li>
				</ul>
			</div>

			<div class="layui-side layui-bg-black">
				<div class="layui-side-scroll">
					<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
					<ul class="layui-nav layui-nav-tree" lay-filter="test">
						<li class="layui-nav-item layui-nav-itemed">
							<a class="" href="javascript:;">商家管理</a>
							<dl class="layui-nav-child">
								<dd>
									<a href="s-user.html">个人信息</a>
								</dd>
							</dl>
						</li>
						<li class="layui-nav-item">
							<a href="#">订单管理</a>
							<dl class="layui-nav-child">
								<dd>
								<a href="s-orders.html">订单列表</a>
								</dd>

							</dl>
						</li>
						<li class="layui-nav-item">
							<a href="#">评价管理</a>
							<dl class="layui-nav-child">
								<dd>
									<a href="s-comment.html">评价列表</a>
								</dd>

						</li>
						<li class="layui-nav-item ">
							<a class="" href="javascript:;">菜品管理</a>
							<dl class="layui-nav-child">
								<dd>
									<a href="s-foods.html">菜品列表</a>
								</dd>
								<dd>
									<a href="s-foodsadd.html">增加菜品</a>
								</dd>
							</dl>
						</li>
					</ul>
				</div>
			</div>

			<div class="layui-body">
				<!-- 内容主体区域 -->
				<div style="padding: 15px;">
					<!-- 该处为搜索框 -->
					

					<table class="layui-hide" id="test" lay-filter="test"></table>

					<script type="text/html" id="toolbarDemo">
						<div class="layui-btn-container">
							<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
							<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
							<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
						</div>
					</script>

					<script type="text/html" id="barDemo">
						<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
						<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
					</script>

					<script src="layui/layui.js" charset="utf-8"></script>
					<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

					<script>
						layui
							.use(
								['table', 'form'],
								function() {
									var table = layui.table;

									table
										.render({
											elem: '#test',
											url: 'as.do',
											toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
												,
											defaultToolbar: [
												'filter',
												'exports',
												'print',
												{ //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
													title: '提示',
													layEvent: 'LAYTABLE_TIPS',
													icon: 'layui-icon-tips'
												}
											],
											title: '用户数据表',
											cols : [ [ {
								type : 'checkbox',
								fixed : 'left'
							}, {
								field : 'storeid',
								title : '编号',
								width : 80,
								fixed : 'left',
								unresize : true,
								sort : true
							}, {
								field : 'store',
								title : '商店名',
								width : 100,
								edit : 'text'
							}, {
								field : 'storename',
								title : '商家名',
								width : 100,
								edit : 'text',
								sort : true
							}, {
								field : 'storecall',
								title : '商家电话',
								width : 150
							}, {
								field : 'address',
								title : '添加地址',
								width : 250
							},{
								field : 'storeinfo',
								title : '商店信息',
								width : 300
							},{
								field : 'money',
								title : '余额',
								width : 100
							},{ fixed: 'right', 
								title:'操作', 
								toolbar: '#barDemo', 
								width:200}
						     ] ],
											page: true,
											id: 'testReload'
										});

									//模糊查询开始
									var $ = layui.$,
										active = {
											reload: function() {
												var demoReload = $('#demoReload');

												//执行重载
												table.reload('testReload', {
													page: {
														curr: 1
														//重新从第 1 页开始
													},
													where: {
														"strLike": demoReload
															.val()
													}
												}, 'data');
											}
										};
									$('.demoTable .layui-btn').on(
										'click',
										function() {
											var type = $(this).data(
												'type');
											active[type] ? active[type]
												.call(this) : '';
										});
									//结束

									//头工具栏事件
									table
										.on(
											'toolbar(test)',
											function(obj) {
												var checkStatus = table
													.checkStatus(obj.config.id);
												switch(obj.event) {
													case 'getCheckData':
														var data = checkStatus.data;
														layer
															.alert(JSON
																.stringify(data));
														break;
													case 'getCheckLength':
														var data = checkStatus.data;
														layer
															.msg('选中了：' +
																data.length +
																' 个');
														break;
													case 'isAll':
														layer
															.msg(checkStatus.isAll ? '全选' :
																'未全选');
														break;

														//自定义头工具栏右侧图标 - 提示
													case 'LAYTABLE_TIPS':
														layer
															.alert('这是工具栏右侧自定义的一个图标按钮');
														break;
												};
											});

									//监听表单提交
									layui.form.on('submit(demo1)', function(data) {
										$.ajax({
											url: "as.do?op=update",
											type: "post",
											contentType: "application/json",
											data: JSON.stringify(data.field),
											success: function(data) {
												console.log(data);
												layer.msg(data == "true" ? "操作失败!" : "操作成功!", {
													icon: 1
												}, function() {
													parent.layer.closeAll();
													location.reload();
												});
											}
										})
										return false; //阻止表单自动提交
									});

									//监听行工具事件
									table
										.on(
											'tool(test)',
											function(obj) {
												var data = obj.data;
												console.log(obj)
												if(obj.event === 'del') {
													layer
														.confirm(
															'真的删除[' +
															data.userName +
															']么',
															function(
																index) {
																$
																	.post(
																		"as.do",
																		"op=del&id=" +
																		data.userId,
																		function(
																			data) {
																			layer
																				.msg(
																					data == "true" ? "操作失败！" :
																					"操作成功！", {
																						icon: 1
																					});
																			console
																				.log(data);
																			console
																				.log(data.id);
																			obj
																				.del();
																			layer
																				.close(index);
																		})
															});
												} else if(obj.event === 'edit') {
													$("#userId").val(data.userId);
													$("#username").val(data.userName);
													$("#userpwd").val(data.userPwd);
													if(data.userSex == '女') {
														$("input[name='sex'][value='女']").prop("checked", true);
													} else {
														$("input[name='sex'][value='男']").prop("checked", true);
													}
													layui.form.render(); //需要把表单提交在刷新一次 这时候需要在上面加入form表单的名字，看上面
													$("#usertel").val(data.userTel);
													$("#housename").val(data.houseName);
													$("#houseid").val(data.userDoorNO);
													$("#userdate").val(data.userDate);
													if(data.userState == '0') {
														$("input[name='userstate'][value='禁用']").prop("checked", true);
													} else {
														$("input[name='userstate'][value='启用']").prop("checked", true);
													}
													layui.form.render(); //需要把表单提交在刷新一次 这时候需要在上面加入form表单的名字，看上面
													layer.open({
														type: 1, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
														title: '修改',
														content: $('#v1'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
														area: ['700px', '600px'],
													})
												}
											});
								});
					</script>

				</div>
			</div>

			<div class="layui-footer">
				<!-- 底部固定区域 -->
				© layui.com - 底部固定区域
			</div>
		</div>
		<script>
			//JavaScript代码区域
			layui.use('element', function() {
				var element = layui.element;

			});
		</script>

		<!-- 临时DOM开始 -->
		<div id="v1" style="display: none;">
			<form class="layui-form" action="" lay-filter="example">
				<div class="layui-form-item">
					<label class="layui-form-label">ID</label>
					<div class="layui-input-block">
						<input type="text" name="userId" id="userId" lay-verify="title" autocomplete="off" readonly="readonly" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-block">
						<input type="text" name="username" id="username" lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-block">
						<input type="password" name="userpwd" id="userpwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-block">
						<input type="radio" name="sex" value="男" title="男" checked="">
						<input type="radio" name="sex" value="女" title="女">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">联系电话</label>
					<div class="layui-input-block">
						<input type="text" name="usertel" id="usertel" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">公寓名称</label>
					<div class="layui-input-block">
						<input type="text" name="housename" id="housename" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">房间编号</label>
					<div class="layui-input-block">
						<input type="text" name="houseid" id="houseid" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">入住时间</label>
					<div class="layui-input-block">
						<input type="text" name="userdate" id="userdate" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">用户状态</label>
					<div class="layui-input-block">
						<input type="radio" name="userstate" value="禁用" title="禁用:0" checked="">
						<input type="radio" name="userstate" value="启用" title="启用:1">
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
					</div>
				</div>
			</form>

		</div>
		<!-- 临时DOM结束 -->

	</body>

</html>